<div v-bind:class="[componentId, 'clyd-widget']">
    <div class="bu-level" v-if="!showZoom">
        <div class="bu-level-left bu-is-flex-shrink-1" style="min-width: 0">
            <clyd-widget-title class="bu-level-item" :title="title" :labels="metricLabels"></clyd-widget-title>
        </div>
        <div class="bu-level-right" v-if="isAllowed">
            <div class="bu-level-item">
                <clyd-bucket v-if="showBuckets" :widget-id="data._id" v-model="selectedBucket"></clyd-bucket>
            </div>
            <div class="bu-level-item">
               <cly-more-options @command="onWidgetCommand">
                    <el-dropdown-item class="dashboard-more-options" command="edit">{{i18n('common.edit')}}</el-dropdown-item>
                    <el-dropdown-item class="dashboard-more-options" command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                    <el-dropdown-item class="dashboard-more-options" v-if="data.visualization === 'time-series' || data.visualization === 'bar-chart'" command="zoom">{{i18n('common.zoom-in')}}</el-dropdown-item>
                    <div v-if="data.visualization === 'time-series'">
                    <hr class="dashboard-more-options__divider">
                    <el-dropdown-item class="dashboard-more-options" command="add">{{i18n('notes.add-note')}}</el-dropdown-item>
                    <el-dropdown-item class="dashboard-more-options" command="manage">{{i18n('notes.manage-notes')}}</el-dropdown-item>
                    <el-dropdown-item class="dashboard-more-options" command="show">{{!areNotesHidden ? i18n("notes.hide-notes") : i18n("notes.show-notes")}}</el-dropdown-item>
                    </div>    
                </cly-more-options>
            </div>
        </div>
    </div>
	<cly-chart-zoom ref="zoomRef" v-if="showZoom" @zoom-reset="onZoomReset" :echartRef="$refs.echartRef.$refs.echarts" class="bu-is-flex bu-is-align-items-center bu-is-justify-content-flex-end bu-m-0 cly-vue-zoom__external"></cly-chart-zoom>
    <clyd-primary-legend :apps="data.apps" :showApps="true" :custom-period="data.custom_period" :custom-text="data.selectedSDK"></clyd-primary-legend>
    <div class="clyd-widget__content" v-loading="loading" :class="'clyd-widget__content--vis-' + data.visualization">
		<template v-if="!loading">
            <div v-if="data.visualization === 'table'" style="width: 100%; height: 100%;">
                <cly-datatable-n v-if="getTableData.length" :rows="getTableData" :hideTop="true" style="width: 100%; height: 100%;">
                    <template v-slot="scope">
                        <el-table-column  v-for="(item, index) in tableStructure" :key="index" :sortable="false" :prop="item.prop" :label="item.title">
                            <template slot-scope="scope">
                                <span v-if="item.type === 'number'">
                                    {{formatNumber(scope.row[item.prop] || 0)}}
                                </span>
                                <span v-else>
                                    {{scope.row[item.prop]}}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                </cly-datatable-n>
                <cly-blank :classes="{'bu-p-0': true}" v-else></cly-blank>
            </div>
            <cly-chart-bar v-else-if="data.visualization === 'bar-chart'" :show-zoom="false" @patchzoom="onPatchZoom" @datazoom="onDataZoom" ref="echartRef"  :showDownload="false" :showToggle="false" :option="stackedBarOptions" height="auto" skin="full" :legend="{show: false}"></cly-chart-bar>
            <cly-chart-bar v-else-if="data.visualization === 'time-series'" :valFormatter="valFormatter" :option="stackedBarTimeSeriesOptions" :patch-x-axis="false" :no-hourly="true" category="user-analytics" :show-zoom="false" @patchzoom="onPatchZoom" @datazoom="onDataZoom" ref="echartRef"  :showDownload="false" :showToggle="false" height="auto" skin="full"></cly-chart-bar>
            <cly-chart-pie v-else-if="data.visualization === 'pie-chart'" :showZoom="false" :showDownload="false" :showToggle="false" :option="pieGraph" height="auto" skin="full" :legend="{show: false}"></cly-chart-pie>
        </template>
	</div>
    <drawer :settings="drawerSettingsForWidgets" :controls="drawers.annotation" @cly-refresh="refresh"></drawer>
</div>